import React, { useEffect } from 'react'
import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from './store'
import { history } from 'umi'
import PageLoading from '@/components/Global/PageLoading'
import IconFont from '@/components/IconFont'
import type { CardInfoRes } from './interface'
import { Toast } from 'antd-mobile'
import { getLocalStorage } from '@/storage'
import dayjs from 'dayjs'

export default observer(function Ability() {
    const store = useLocalObservable(() => new Store())
    const { moduleList, getCardInfo } = store

    useEffect(() => {
        document.title = '求职实训'
        getCardInfo()
        return () => {
            document.title = ''
        }
    }, [])

    /** 跳转到详情页 */
    function handleClick(data: CardInfoRes) {
        const { status_info, id, auction_record_id } = data
        const userData = getLocalStorage('USER_DATA')
        const { userStudent } = userData
        // /** 拍卖游戏的控制 */
        // if (status_info && status_info?.key !== '1') {
        switch (status_info?.key) {
            case '0':
                Toast.show('老师暂未发起实训')
                return

            // case '2':
            //     Toast.show('实训进行中，无法加入')
            //     return
            default:
                break
        }

        // }

        switch (id) {
            case '1':
                history.push(`/auction/${auction_record_id}`)
                break
            case '2':
                if (dayjs().isAfter(userStudent.begin_class_time) && dayjs().isBefore(userStudent.end_class_time)) {
                    history.push(`/introduction`)
                } else {
                    Toast.show('班级未开始或已结班')
                }
                break
            default:
                break
        }
    }

    if (!moduleList) {
        return <PageLoading />
    }

    return (
        <div className={styles.container}>
            <div className={styles.wrapper}>
                <div className={styles.title_text}>
                    实训说明：讲师可在班级处于培训时间内，在教学服务管理平台的班级管理中，点击“训练卡片”下方新建按钮发起相关模拟实训；学员需在该页等待发起后，加入相关实训
                </div>
                <div className={styles.view_result_btn} onClick={() => history.push('/training/list')}>
                    <IconFont type="icon-icon_sousuo" />
                    查看测评结果
                </div>
                <div className={styles.module_wrapper}>
                    {moduleList?.map((item: any) => {
                        const { status_info, id, type } = item
                        return (
                            <div className={styles.training_box} key={id} onClick={() => handleClick(item)}>
                                {status_info && <div className={`${styles.tag} ${styles[`tag_${status_info?.key}`]}`}>{item?.status_info?.name}</div>}
                                <div className={styles.main}>
                                    <img className={styles.icon} src={item?.cover} />
                                    <div className={styles.content}>
                                        <div className={styles.title}>
                                            <span>{item?.name}</span>
                                            <IconFont className={styles.arraw} type="icon-zuojiantou" />
                                        </div>
                                        <div className={styles.sub_content}>
                                            <IconFont type="icon-icon_renshu" />
                                            {item?.used_num}
                                        </div>
                                    </div>
                                </div>
                                <div className={styles.introduce}>{item?.describe}</div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    )
})
